<!DOCTYPE html>

{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}{{ course.name }}-用户评论{% endblock %}

{% block header %}
<nav>
				<div class="nav">
					<div class="wp">
						<ul>
							<li><a href="{% url 'index' %}">首页</a></li>
							<li class="active">
								<a href="{% url 'course:course_list' %}">
									公开课<img class="hot" src="/static/images/nav_hot.png">
								</a>
							</li>
							<li>
								<a href="{% url 'org:teacher_list' %}">授课教师</a>
							</li>
							<li ><a href="{% url 'org:org_list' %}">授课机构</a></li>
						</ul>
					</div>
				</div>
			</nav>
{% endblock %}

{% block custom_bread %}
<section>
	<div class="wp">
		<ul  class="crumbs">
			<li><a href="/">首页</a>></li>
            <li><a href="{% url 'course:course_list' %}">公开课程</a>></li>
            <li><a href="{% url 'course:course_detail' course.id %}">课程详情</a>></li>
            <li>课程评论</li>
		</ul>
	</div>
</section>
{% endblock %}

{% block content %}
<div id="main">
    <div class="course-infos">
        <div class="w pr">
            <div style="height: 15px" class="path">
            </div>
            <div class="hd">
                <h2 class="l">{{ course.name }}</h2>
            </div>
            <div class="statics clearfix">
                <div class="static-item ">
                    <span class="meta-value"><strong>{{ course.get_degree_display }}</strong></span>
                    <span class="meta">难度</span>
                    <em></em>
                </div>
                <div class="static-item static-time">
                    <span class="meta-value"><strong> 7</strong>小时<strong> 0</strong>分</span>
                    <span class="meta">时长</span>
                    <em></em>
                </div>
                <div class="static-item">
                    <span class="meta-value"><strong>{{ course.students }}</strong></span>
                    <span class="meta">学习人数</span>
                    <em></em>
                </div>
            </div>
        </div>
    </div>
    <div class="course-info-main clearfix w has-progress">

        <div class="info-bar clearfix">
            <div class="content-wrap clearfix">
                <div class="content">
                    <div class="mod-tab-menu">
                        <ul class="course-menu clearfix">
                            <li><a class="ui-tabs-active " id="learnOn"  href="{% url 'course:course_info' course.id %}"><span>章节</span></a></li>
                            <li><a id="commentOn" class="active" href="/comment/452"><span>评论</span></a></li>
                        </ul>
                    </div>

                    <!--发布评论-->
                    <div id="js-pub-container" class="issques clearfix js-form">
                        <div class="wgt-ipt-wrap pub-editor-wrap " id="js-pl-input-fake">
                            <textarea id="js-pl-textarea" class="" placeholder="扯淡、吐槽、表扬、鼓励……想说啥就说啥！" ></textarea>
                            <span class="num-limit"><span id="js-pl-limit">0</span>/300</span>
                        </div>
                        <div id="pub-btm" class="pub-btm clearfix">
                            <div class="verify-box l js-verify-box" style="display: none">
                                <input type="text" class="ipt l" placeholder="请输入验证码">
                                <a href="javascript:;" class="js-verify-refresh"><img data-src="/course/getcoursecommentcode" class="verify-media l"/></a>
      <span class="verify-help l">
        看不清
        <a href="javascript:;" class="verify-refresh js-verify-refresh">换一换</a>
      </span>
                            </div>
                            <input type="button" id="js-pl-submit" class="pub-btn r" data-cid="452" value="发表评论">
                            <span class="errortip r">您还没有填写内容！</span>
                        </div>
                        <p class="global-errortip js-global-error"></p>
                    </div>
                    <div id="course_note">
                        <ul class="mod-post" id="comment-list">
                            {% for user_comment in all_comments.object_list %}
                            <li class="post-row">
                                <div class="media">
                                    <a href="/u/301450/comments" target="_blank"><img src='{{ MEDIA_URL }}{{ user_comment.user.image }}' width='40' height='40' /></a>
                                </div>
                                <div class="bd">
                                    <div class="tit">
                                        <a href="/u/301450/comments" target="_blank">{{ user_comment.user.username }}</a>
                                    </div>
                                    <p class="cnt">{{ user_comment.comments }}</p>
                                    <div class="footer clearfix">
                                        <span title="创建时间" class="l timeago">时间：{{ user_comment.add_time }}</span>
                                        <div class="actions r">
                                            <a title="赞" href="javascript:;" class="js-pl-praise list-praise post-action "  data-id="137831">
                                                <span class="icon-thumb "></span>
                                                <em>{{ user_comment.comments_praise }}</em>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            {% endfor %}
                        </ul>
                        <!--<ul class="pagelist">-->
                        <!--{% if all_comments.has_previous %}-->
                                <!--<li class="long"><a href="?{{ all_comments.previous_page_number.querystring }}" >上一页</a></li>-->
                            <!--{% endif %}-->

                            <!--{% for page in all_comments.pages %}-->
                                <!--{% if page %}-->
                                    <!--{% ifequal page all_comments.number %}-->
                                        <!--<li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>-->
                                <!--{% else %}-->
                                    <!--<li><a href="?{{ page.querystring }}">{{ page }}</a></li>-->
                                <!--{% endifequal %}-->
                                <!--{% else %}-->
                                    <!--<li class="none"><a href="">...</a></li>-->
                                <!--{% endif %}-->
                            <!--{% endfor %}-->
                            <!--{% if all_comments.has_next %}-->
                                <!--<li class="long"><a href="?{{ all_comments.next_page_number.querystring }}">下一页</a></li>-->
                            <!--{% endif %}-->
                        <!--</ul>-->

                        <div class="page">
                            {% if all_comments.has_previous %}
                                <span class="disabled_page"><a href="?{{ all_comments.previous_page_number.querystring }}" >上一页</a></span>
                            {% endif %}

                            {% for page in all_comments.pages %}
                                {% if page %}
                                    {% ifequal page all_comments.number %}
                                        <a class="active"><a href="?{{ page.querystring }}">{{ page }}</a></a>
                                {% else %}
                                    <a href="?{{ page.querystring }}">{{ page }}</a>
                                {% endifequal %}
                                    {% else %}
                                        <li class="none"><a href="">...</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if all_comments.has_next %}
                                    <a href="?{{ all_comments.next_page_number.querystring }}">下一页</a>
                                {% endif %}
                        </div>









                        <!--<div class="page">-->
                            <!--<span class="disabled_page">上一页</span>-->
                            <!--<a href="javascript:void(0)" class="active">1</a>-->
                            <!--<a href="/course/comment/id/452?page=2">2</a>-->
                            <!--<a href="/course/comment/id/452?page=2">下一页</a><a href="/course/comment/id/452?page=2">尾页</a>-->
                        <!--</div>-->
                    </div>

                </div>
                <div class="aside r">
                    <div class="bd">

                        <div class="box mb40">
                            <h4>资料下载</h4>
                            <ul class="downlist">
                            {% for resource in all_resources %}
                            <li>
                                <span ><i class="aui-iconfont aui-icon-file"></i>&nbsp;&nbsp;{{ resource.name }}</span>
                                <a href="{{ MEDIA_URL }}{{ resource.download }}" class="downcode" target="_blank" download="" data-id="274" title="">下载</a>
                            </li>
                            {% endfor %}

                            </ul>
                        </div>
                        <div class="box mb40">
                            <h4>讲师提示</h4>
                            <div class="teacher-info">
                                <a href="/u/315464/comments?sort=publish" target="_blank">
                                    <img src='{{ MEDIA_URL }}{{ course.teacher.image }}' width='80' height='80' />
                                </a>
        <span class="tit">
          <a href="/u/315464/comments?sort=publish" target="_blank">{{ course.teacher.name }}</a>
        </span>
                                <span class="job">{{ course.teacher.work_position }}</span>
                            </div>
                            <div class="course-info-tip">
                                <dl class="first">
                                    <dt>课程须知</dt>
                                    <dd class="autowrap">{{ course.need_know }}</dd>
                                </dl>
                                <dl>
                                    <dt>老师告诉你能学到什么？</dt>
                                    <dd class="autowrap">{{ course.what_can_learn }}</dd>
                                </dl>
                            </div>
                        </div>


                        <div class="cp-other-learned  js-comp-tabs">
                            <div class="cp-header clearfix">
                                <h2 class="cp-tit l">该课的同学还学过</h2>
                            </div>
                            <div class="cp-body">
                                <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="course" style="display: block">
                                    <!-- img 200 x 112 -->
                                    <ul class="other-list">
                                        {% for relate_course in relate_courses %}
                                        <li class="curr">
                                            <a href="/view/85?src=sug" target="_blank">
                                                <img src="{{ MEDIA_URL }}{{relate_course.image }}" alt="{{ relate_course.name }}">
                                                <span class="name autowrap">{{ relate_course.name }}</span>
                                            </a>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="cp-tab-pannel js-comp-tab-pannel" data-pannel="plan">
                                    <ul class="other-list">
                                        <li class="curr">
                                            <a href="/course/programdetail/pid/31?src=sug" target="_blank">
                                                <img src="http://img.mukewang.com/56551e6700018b0c09600720-240-135.jpg" alt="Java工程师">
                                                <span class="name autowrap">Java工程师</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>    </div>
            </div>
            <div class="clear"></div>

        </div>

    </div>



    <!--script-->
    <script src="/static/js/plugins/jquery.scrollLoading.js"  type="text/javascript"></script>
    <script src="/static/js/deco-common.js"  type="text/javascript"></script>
    <script>
        $(".chapter h3 strong").click(
                function () {
                    if($(this).parent().find("span").hasClass("aui-icon-add")){
                        $(this).parent().find("span").removeClass("aui-icon-add")
                        $(this).parent().find("span").addClass("aui-icon-move")
                        $(this).parent().parent().addClass("chapter-active")
                    }else if($(this).parent().find("span").hasClass("aui-icon-move")){
                        $(this).parent().find("span").removeClass("aui-icon-move")
                        $(this).parent().find("span").addClass("aui-icon-add")
                        $(this).parent().parent().removeClass("chapter-active")
                    }
                }
        )
    </script>
</div>
{% endblock %}
{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{% static '/css/muke/base.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/muke/common-less.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/muke/course/common-less.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/muke/course/learn-less.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/muke/course/course-comment.css' %}">
{% endblock %}

{% block custom_js %}
    <script type="text/javascript">
    //添加评论
    $('#js-pl-submit').on('click', function(){
        var comments = $("#js-pl-textarea").val()
        if(comments == ""){
            alert("评论不能为空")
            return
        }
        $.ajax({
            cache: false,
            type: "POST",
            url:"{% url 'course:add_comment' %}",
            data:{'course_id':{{ course.id }}, 'comments':comments},
            async: true,
            beforeSend:function(xhr, settings){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function(data) {
                if(data.status == 'fail'){
                    if(data.msg == '用户未登录'){
                        window.location.href="/login/";
                    }else{
                        alert(data.msg)
                    }

                }else if(data.status == 'success'){
                    window.location.reload();//刷新当前页面.
                }
            },
        });
    });

</script>
{% endblock %}